// 从 @logicflow/core 库导入所需的类和类型
import { h, createApp } from "vue";
import LogicFlow, { HtmlNode, HtmlNodeModel } from "@logicflow/core";
import TargetIp from "./TargetIp.vue";

class TargetIpHtmlNode extends HtmlNode {
  setHtml(rootEl: SVGSVGElement): void {
    const el = document.createElement("div");
    const { properties } = this.props.model;
    // rootEl.innerHTML = "";
    rootEl.appendChild(el);
    // el.style.display = "flex";
    // el.style.justifyContent = "center";
    // el.style.alignItems = "center";
    createApp({
      render: function () {
        return h(
          TargetIp,
          {
            data: properties.data as object,
          },
          ""
        );
      },
    }).mount(el);
  }
}

class TargetIpHtmlModel extends HtmlNodeModel {
  /**
   * 初始化节点数据
   * @param data 传递给节点的初始数据
   */
  initNodeData(data: any): void {
    const { properties } = this;
    // 调用父类的initNodeData方法来初始化节点数据
    super.initNodeData(data);
    // 禁止节点文本编辑
    data.text.editable = false;

    // 定义节点的宽度和高度
    const width = properties.width || 220;
    const height = properties.height || 180;
    // 设置节点的宽度和高度
    this.width = width;
    this.height = height;

    // 设置节点的锚点偏移量，用于连接其他节点
    this.anchorsOffset = [
      // { x: width / 2, y: 0 },
      // { x: width, y: height / 2 },
      // { x: width / 2, y: height },
      // { x: 0, y: height / 2 },
      { x: width / 2, y: height / 2 },
      { x: 0 - width / 2, y: 0 - height / 2 },
    ];
  }
}

// 导出自定义多边形节点的配置
export default {
  type: "TargetIpHtml", // 自定义节点类型的唯一标识
  view: TargetIpHtmlNode, // 视图使用基础的多边形节点视图
  model: TargetIpHtmlModel, // 模型使用上面定义的自定义多边形节点模型
};
